<template>
  <div>
    <!-- 折线图、面积图 -->
    <LineDisplay :display="display" v-if="chart_type == 'line'" :form="form" />
    <!-- 柱状图、条形图、组合图 -->
    <BarDisplay :display="display" v-if="chart_type == 'bar'" :form="form"  />
    <!-- 饼图、环图 -->
    <PieDisplay :display="display" v-if="chart_type == 'pie'" :form="form" />
    <!-- 地理地图 -->
    <MapDisplay :display="display" v-if="chart_type == 'map'" :form="form" />
    <!-- 表格 -->
    <TableDisplay :display="display" :form="form" v-if="chart_type == 'table'"  />
    <!-- 数字指标块 -->
    <NumberDisplay :display="display" v-if="chart_type == 'number'" :form="form"  />
    <!-- 漏斗图 -->
    <FunnelDisplay :display="display" v-if="chart_type == 'funnel'" :form="form" />
    <!-- 路径图 -->
    <PathDisplay :display="display" v-if="chart_type == 'path'" :form="form" />
    <!-- 留存图 -->
    <RetentionDisplay :display="display" v-if="chart_type == 'retention'" :form="form" />
  </div>
</template>

<script>
import LineDisplay from './line_display.vue';
import BarDisplay from './bar_display.vue';
import PieDisplay from './pie_display.vue';
import MapDisplay from './map_display.vue';
import TableDisplay from './table_display.vue';
import NumberDisplay from './number_display.vue';
import FunnelDisplay from './funnel_display.vue';
import PathDisplay from './path_display.vue';
import RetentionDisplay from './retention_display.vue';
  export default {
    name: 'GroupDisplay',
    props: ['display', 'form'],
    components: {
      LineDisplay,
      BarDisplay,
      PieDisplay,
      MapDisplay,
      TableDisplay,
      NumberDisplay,
      FunnelDisplay,
      PathDisplay,
      RetentionDisplay
    },
    data() {
      return {
        typeStatus: 'line'
      }
    },
    watch: {},
    computed: {
      chart_type () {
        if (['line', 'area'].includes(this.form.type)) return 'line'
        if (['bar', 'strip', 'group'].includes(this.form.type)) return 'bar'
        if (['pie', 'loop'].includes(this.form.type)) return 'pie'
        if (this.form.type == 'map') return 'map'
        if (this.form.type == 'table') return 'table'
        if (this.form.type == 'number') return 'number'
        if (this.form.type == 'funnel') return 'funnel'
        if (this.form.type == 'path') return 'path'
        if (this.form.type == 'retention') return 'retention'
      }
    },
    methods: {

    },
    mounted() {},
  }
</script>

<style scoped>

</style>